/**
 * Created by Kimi on 2017/5/11.
 * 改变ListView的主轴方向，让ListView横向布局，然后设置换行显示，就能实现类似
 *  collectionView的布局了
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Navigator,
    Text,
    View,
    ListView,
    Image,
    NavigatorIOS
} from 'react-native';

var Dimensions = require('Dimensions');//获取屏幕的宽高
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;


var PunchCard = React.createClass({
    getInitialState(){
        //初始化数据源
        //{rowHasChanged:function(r1,r2){return r1 !== r2} }

        var ds = new  ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
        return{
            dataSource : ds.cloneWithRows(this.getRows({}))
        }
    },
    //制作假数据
    getRows(){
        var Arr = [];
        for(var i = 0; i<100; i++){
            Arr.push(
                {
                    image: '111',
                    price:'222'
                }            )
        }
        return Arr;
    },
    render(){
        return(
            <ListView     //创建ListView
                dataSource={this.state.dataSource} //设置数据源
                renderRow={this.renderRow} //设置cell
                contentContainerStyle={styles.listViewStyle}//设置cell的样式
            />

            )
    },
    //返回cell的方法
    renderRow(rowData,sectionID,rowID,highlightRow){
        return(
            <View style={styles.bgStyle}>
                <Image style={styles.imageStyle}/>
                <Text style={{fontSize:12,marginBottom:0}}>{rowData.price}</Text>
            </View>            )
    }

}
)


//样式
const styles = StyleSheet.create({
    listViewStyle:{
        flexDirection:'row', //设置横向布局
        flexWrap:'wrap'    //设置换行显示
    },
    bgStyle:{
        backgroundColor:'gray',
        width:(ScreenWidth-80)/4, //cell的宽度
        height:(ScreenWidth-80)/4,
        marginLeft:15,
        marginTop:15
    },
    imageStyle:{
        width:(ScreenWidth-80)/4,
        height:(ScreenWidth-80)/4 - 10,
        backgroundColor:'red',
        marginBottom:0,
    }
});
module.exports = PunchCard;